<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城平台</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
    <div style="text-align: center">
        <h1>商城平台</h1>
    </div>

    <div id="app">
        <div v-for="sku in skus">
            <div>
                <div>{{sku.financeSkuDescribe}}}</div>
                <div>{{sku.financeSkuPrice}}}</div>
                <div>{{sku.financeSkuStock}}}</div>
                <div>
                    <button @click="addCart(sku.id)">加入购物车</button>
                </div>
                <div>
                    <button @click="addOrder(sku.id)">立即购买</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                skus:[]
            },
            methods:{
                //获取商品列表
                skuList: $.get("/skuList",{},function (req){
                    if("noLogin"==req){
                        window.location.href="http://localhost:9300/login";
                    }
                    app.skus=req;
                }),

                addCart(skuId) {
                    $.post("/addCart", { skuId: skuId }, (req) => {
                        layer.msg('加入购物车成功');
                    });
                },

                //立即购买
                addOrder:function (id){
                    $.post("/addOrder",{skuId:id},function (req){
                        layer.msg(req);
                    })
                }
            },
            mounted(){
                this.skuList();
            }
        })
    </script>

</body>
</html>